This module integrates the Responsive Images library created by Filament Group.The purpose of this library is to load images in different sizes based uponthe resolution of the browser loading the page. This allows for mobile-optimized images.This module provides a "Responsive Images" image field formatter for which you can selectboth a small (mobile-optimized) image style as well as a large (for normal screens) image style.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
A Responsive Images approach that you can use today, that mimics the proposed picture element using divs, for safety sake.
A comÂmon probÂlem in responÂsive design is the linkÂing of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be useÂful to use JavaScript and pull in difÂferÂent conÂtent at the same time, e.g. higher qualÂity images. With CSS tranÂsiÂtions, specifÂiÂcally their tranÂsiÂtioÂnEnd events, we can marry up our media queries and JavaScript perÂfectly, withÂout resortÂing to winÂdow resize events.
